function Backdrop(parent, data) {
	this.parent = parent;
	this.data = data;
	var self = this;
	if (data.bgFile) {
		ImageLoader.fetch(data.bgFile, function (img) { self.bg = img });
	}
	if (data.edgeFile) {
		ImageLoader.fetch(data.edgeFile, function (img) { self.edge = img });
	}
}

Backdrop.prototype = {
	draw: function (ctx) {
		ctx.save();
		var x = this.parent.x + this.data.insets.left;
		var y = this.parent.y + this.data.insets.top;
		var w = this.parent.w - this.data.insets.left - this.data.insets.right;
		var h = this.parent.h - this.data.insets.top - this.data.insets.bottom;
		if (this.bg && this.bg.width > 0 && this.bg.height > 0) {
			if (this.data.tile) {
				var size = this.data.tileSize;
				var temp_ctx = get_temporary_context(size, size);
				temp_ctx.drawImage(this.bg, 0, 0, this.bg.width, this.bg.height, 0, 0, size, size);
				var pattern = ctx.createPattern(temp_ctx.canvas, "repeat");
				ctx.fillStyle = pattern;
				ctx.fillRect(x, y, w, h);
			} else {
				ctx.drawImage(this.bg, x, y, w, h);
			}
		}
		if (this.edge && this.edge.width > 0 && this.edge.height > 0) {
			var size = this.data.edgeSize;
			var iSize = this.edge.height;
			var temp_ctx = get_temporary_context(size, size);
			// left border
			temp_ctx.drawImage(this.edge, 0, 0, iSize, iSize, 0, 0, size, size);
			var pattern = ctx.createPattern(temp_ctx.canvas, "repeat-y");
			ctx.fillStyle = pattern;
			ctx.save();
			ctx.translate(this.parent.x, this.parent.y + size);
			ctx.fillRect(0, 0, size, this.parent.h - size * 2);
			ctx.restore();
			// right border
			temp_ctx.clearRect(0, 0, size, size);
			temp_ctx.drawImage(this.edge, iSize, 0, iSize, iSize, 0, 0, size, size);
			var pattern = ctx.createPattern(temp_ctx.canvas, "repeat-y");
			ctx.fillStyle = pattern;
			ctx.save();
			ctx.translate(this.parent.x + this.parent.w - size, this.parent.y + size);
			ctx.fillRect(0, 0, size, this.parent.h - size * 2);
			ctx.restore();
			// top border
			temp_ctx.clearRect(0, 0, size, size);
			temp_ctx.save();
			temp_ctx.rotate(Math.PI / 2);
			temp_ctx.translate(0, -size);
			temp_ctx.drawImage(this.edge, iSize * 2, 0, iSize, iSize, 0, 0, size, size);
			temp_ctx.restore();
			var pattern = ctx.createPattern(temp_ctx.canvas, "repeat-x");
			ctx.fillStyle = pattern;
			ctx.save();
			ctx.translate(this.parent.x + size, this.parent.y);
			ctx.fillRect(0, 0, this.parent.w - size * 2, size);
			ctx.restore();
			// bottom border
			temp_ctx.clearRect(0, 0, size, size);
			temp_ctx.save();
			temp_ctx.rotate(Math.PI / 2);
			temp_ctx.translate(0, -size);
			temp_ctx.drawImage(this.edge, iSize * 3, 0, iSize, iSize, 0, 0, size, size);
			temp_ctx.restore();
			var pattern = ctx.createPattern(temp_ctx.canvas, "repeat-x");
			ctx.fillStyle = pattern;
			ctx.save();
			ctx.translate(this.parent.x + size, this.parent.y + this.parent.h - size);
			ctx.fillRect(0, 0, this.parent.w - size * 2, size);
			ctx.restore();
			// topleft corner
			ctx.drawImage(this.edge, iSize * 4, 0, iSize, iSize,
				this.parent.x, this.parent.y, size, size);
			// topright corner
			ctx.drawImage(this.edge, iSize * 5, 0, iSize, iSize,
				this.parent.x + this.parent.w - size, this.parent.y, size, size);
			// bottomleft corner
			ctx.drawImage(this.edge, iSize * 6, 0, iSize, iSize,
				this.parent.x, this.parent.y + this.parent.h - size, size, size);
			// bottomright corner
			ctx.drawImage(this.edge, iSize * 7, 0, iSize, iSize,
				this.parent.x + this.parent.w - size,
				this.parent.y + this.parent.h - size, size, size);
		}
		ctx.restore();
	},
}
